import { useSuspenseQuery } from "@tanstack/react-query";
import { createFileRoute } from "@tanstack/react-router";
import { ReportsTimeline } from "@/components/reports/reports-timeline";
import { reportsQueryOptions } from "@/queries/reports";

export const Route = createFileRoute("/_app/reports")({
  loader: ({ context: { queryClient } }) => queryClient.ensureQueryData(reportsQueryOptions),
  component: RouteComponent,
});

function RouteComponent() {
  const { data } = useSuspenseQuery(reportsQueryOptions);
  return <ReportsTimeline reports={data} />;
}
